import React, { Component } from 'react'
import { Row, Col, Button } from 'antd'



class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectKey: []
        }
        this.onChange = this.onChange.bind(this)
        this.isSelectAll = this.isSelectAll.bind(this)
        this.isSelected = this.isSelected.bind(this)

    }

    onChange (key) {
        let nextSelectKey = JSON.parse(JSON.stringify(this.state.selectKey))
        if (key === 'all') {
            nextSelectKey = []
        } else {
            if (this.props.type === 'Selector') {
                nextSelectKey = [key]
            } else {
                const index = nextSelectKey.indexOf(key)
                if (index > -1) {
                    nextSelectKey.splice(index, 1)
                } else {
                    nextSelectKey.push(key)
                }

            }
        }
        const selectedLength = nextSelectKey.length
        const allLength = this.props.options.length
        if (selectedLength >= allLength) {
            nextSelectKey = []
        }
        this.setState({
            selectKey: nextSelectKey
        })
        // 将筛选数据回传父组件
        this.props.onChange(nextSelectKey.map((key) => {
            return key.split('_')[1]
        }))
    }

    isSelectAll () {
        const selectedLength = this.state.selectKey.length
        return selectedLength === 0
    }

    isSelected (key) {
        const index = this.state.selectKey.indexOf(key)
        return index > -1
    }

    render () {
        const { label, options } = this.props
        const selectedStyle = { width: '60px', margin: '4px', color: '#fff', backgroundColor: '#1890ff' }
        const unSelectedStyle = { width: '60px', margin: '4px', color: '#fff', backgroundColor: '#c0c0c0' }
        return <Row key={label}>
            <Col span={5} style={{ textAlign: 'right' }}>{label}：</Col>
            <Col span={19}>
                {(() => {
                    let ButtonList = []
                    ButtonList.push(
                        <Button
                            size='small'
                            key={`all`}
                            style={this.isSelectAll() ? selectedStyle : unSelectedStyle}
                            onClick={() => {
                                this.onChange('all')
                            }}>
                            全部
                            </Button>
                    )
                    if (options instanceof Array) {
                        options.forEach((option) => {
                            ButtonList.push(
                                <Button
                                    size='small'
                                    key={`one_${option}`}
                                    style={this.isSelected(`one_${option}`) && !this.isSelectAll() ? selectedStyle : unSelectedStyle}
                                    onClick={() => {
                                        this.onChange(`one_${option}`)
                                    }}>
                                    {option}
                                </Button>
                            )
                        })
                    }
                    return ButtonList
                })()}
            </Col>
        </Row>
    }
}
export default Index